<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Mapa</title>
    <script type="text/javascript">
	"use strict";
	String.prototype.format = function() {
    		var formatted = this;
    		for (var i = 0; i < arguments.length; i++) {
        		var regexp = new RegExp('\\{'+i+'\\}', 'gi');
        	formatted = formatted.replace(regexp, arguments[i]);
    	}
    	return formatted;
    	};

      function toRad(angle) {
         return Math.PI * angle / 180.0;
      }

      function mercator(fi, r, b) {
        fi = toRad(fi);
	return r*Math.log(Math.tan(Math.PI/4.0+fi/2.0))-b;
      }

      function mrect(latitude, longitude, lat_delta, long_delta, r, b, min_long, long_pxperdeg) {
          var xmin = (longitude - min_long) * long_pxperdeg;
          var xmax = (longitude + long_delta - min_long) * long_pxperdeg;
          var ymin = mercator(latitude,r,b);
          var ymax = mercator(latitude + lat_delta,r,b);
          return [xmin, xmax, ymin, ymax];
      }

     function mercatorParam(min_lat, max_lat, height) {
	var mmin = mercator(min_lat, 1.0, 0.0);
	var mmax = mercator(max_lat, 1.0, 0.0);
        var r = height / (mmax - mmin);
	return [r, r*mmin];
      }

     function info(min_lat, max_lat, min_long, max_long, n_lat, n_long, width, height) {
       console.log("numbers of rectangles: " + (n_lat * n_long));
       var lat_mperdegree = 111300;
       console.log("Width of rectangle in latitude:" +  (lat_mperdegree * (max_lat - min_lat) / n_lat));
       var long_mperdegree = lat_mperdegree * Math.cos(toRad(min_lat));
       console.log("Maximal width of rectangle in longitude:" + (long_mperdegree * (max_long - min_long) / n_long));
       var long_mperdegree = lat_mperdegree * Math.cos(toRad(max_lat));
       console.log("Minimal width of rectangle in longitude:" + (long_mperdegree * (max_long - min_long) / n_long));
       console.log("Average rectangle: (wxh)" + width/n_long + "x" + height/n_lat); 
     }

      function draw(grid, query, style, imagePath){
        var canvas = document.getElementById('mapa');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = style.color;
          var img = new Image();
          img.onload = function(){
               var r;
               var mParam = mercatorParam(grid.min_lat, grid.max_lat, img.height);
               var step_lat = (grid.max_lat - grid.min_lat) / grid.n_lat;
	       var lat_koef = Math.floor(grid.n_lat /  (grid.max_lat - grid.min_lat) + 1e-6); 
               var step_long = (grid.max_long - grid.min_long) / grid.n_long;
	       var long_koef = Math.floor(grid.n_long / (grid.max_long - grid.min_long) + 1e-6);
               info(grid.min_lat, grid.max_lat, grid.min_long, grid.max_long, grid.n_lat, grid.n_long, img.width, img.height);
               ctx.drawImage(img, 0, 0);
	       
	       var url = "http://ithil.ujep.cz/te/query.php?category={0}&liked={1}&lat_coef={2}&long_coef={3}".format(
	          query.category, query.liked, lat_koef, long_koef);
	       var http_request = new XMLHttpRequest();
	       http_request.open("GET", url, true);
	       http_request.onreadystatechange = function () {
    			var done = 4, ok = 200;
    			if (http_request.readyState == done && http_request.status == ok) {
        			var rct = JSON.parse(http_request.responseText);
 				for(var i = 0; i < rct.length; i++) {
				   var occur = rct[i].o;
				   var latitude = rct[i].lt;
				   var longitude = rct[i].lg;				           
				   if(latitude < grid.min_lat || latitude > grid.max_lat) {
					continue;
				   }
				   if(longitude < grid.min_long || longitude > grid.max_long) {
					continue;
				   }				   
				   r = mrect(latitude, longitude, step_lat, step_long, mParam[0], mParam[1], 
                                          grid.min_long, img.width / (grid.max_long - grid.min_long));
				   ctx.fillRect(r[0], img.height-r[3], r[1]-r[0], r[3]-r[2]); 
				}
    			}
		};
		http_request.send(null);
          };
          img.src = imagePath;
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw({min_lat:50.05, max_lat:51.05, min_long:12.9, max_long:14.7, n_lat:160, n_long:180}, 
                     {liked:true, category:0}, {color: 'rgba(255,0,0,0.5)'}, 'map.png');">
    <canvas id="mapa" width="1400" height="1200"></canvas>
  </body>
</html>
